<template>
  <transition name="">
    <div class="strategyMiddle">
      <v-header title="我的攻略" ref="header">
      </v-header>
      <scroll ref="scroll" style="overflow: hidden;"
          :data="strategyList"
          :scrollbar="false"
          :style="{height: swiperHeight}"
          :pullDownRefresh="true"
          :pullUpLoad="true"
          @pullingDown="onPullingDown"
          @pullingUp="onPullingUp">
          <!--攻略的模块 -->
          <div>
              <div class="strategyWrapper" v-for="item in strategyList" :key="item.id" @click="handleGoStrategyDesc(item.id)">
                  <div class="imgWrapper" :style="{backgroundImage:`url(${item.firstImg + '-meitu1'})`}">
                  </div>
                  <div class="textWrapper">
                      <p>{{item.title}}</p>
                  </div>
                  <div class="positionWrapper">
                      <p>{{item.addressName}}</p>
                  </div>
                  <div class="bottomStrategy">
                      <div class="countWrapper">
                          <p>{{item.browseCount}}次浏览</p>
                      </div>
                      <div class="timeWrapper">
                          <p>{{item.publishTime}}</p>
                      </div>
                  </div>
              </div>
              <not-data v-if="strategyList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="handleGetStrategy()"></not-data>
          </div>
      </scroll>
      <div class="dynamicPublish" @click="handlePublishCategary" style="border-radius: 50%;">
        <img :src="plusbgImage" alt="">
      </div>
    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import { localUser } from '@/assets/js/local'
import axios from '@/api/axiosApi'
import notData from '@/components/not-data/not-data'
import plusbgImage from '@/assets/img/plusBg.png'
import { Tab, TabItem, Timeline, TimelineItem, Cell, Rater, Swiper, SwiperItem, Badge } from 'vux'
export default {
  data () {
    return {
      plusbgImage: plusbgImage,
      swiperHeight: '500px',
      strategyList: [],
      dynamicImgUrl: 'http://p0w4yb0aj.bkt.clouddn.com/background_my.jpg',
      draftTravelNum: 0
    }
  },
  components: {
    VHeader, Scroll, Tab, TabItem, Timeline, TimelineItem, Cell, Rater, Swiper, SwiperItem, axios, localUser, Badge, notData
  },
  mounted () {
    this.swiperHeight = window.innerHeight - this.$refs.header.$el.offsetHeight + 'px'
  },
  created () {
    this.pageSize = 10
    this.pageNum = 1
    this.handleGetStrategy()
    this.getDraftStrategyNum()
  },
  activated () {
    this.handleGetStrategy()
    this.getDraftStrategyNum()
  },
  computed: {
  },
  methods: {
    // 获取攻略信息接口
    handleGetStrategy () {
      axios.get(this, '/v1/playStrategy', {articleType: 1, publishUserId: localUser.get('id'), pageNum: this.pageNum, pageStragetySize: this.pageSize}, (data) => {
        if (data.length === 0) {
          if (this.pageNum === 1) {
            this.$refs.scroll.hiddenPullDown()
          } else {
            this.pageNum--
            this.$refs.scroll.hiddenPullUpLoad()
          }
        } else {
          if (this.pageNum > 1) {
            this.strategyList = this.strategyList.concat(data)
          } else {
            this.strategyList = data
          }
        }
      })
    },
    onPullingUp () {
      this.pageNum++
      this.handleGetStrategy()
    },
    onPullingDown () {
      this.pageNum = 1
      this.handleGetStrategy()
    },
    handlePublishCategary () {
      this.$router.push('/address/travelsEdit/1')
    },
    handleGoStrategyDesc (id) {
      this.$router.push('/address/playStrategy/' + id)
    },
    // 获取草稿游记的数量
    getDraftStrategyNum () {
      const _self = this
      axios.get(this, '/v1/playStrategyCount', {
        publishUserId: localUser.get('id'),
        publish: 0,
        curUserId: localUser.get('id')
      }, (data) => {
        _self.draftTravelNum = data
      })
    }
  },
  watch: {

  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'
  .strategyMiddle{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background-color: $color-background;
    z-index: 101;
  }

.strategyWrapper {
      margin-bottom: 10px
      background-color: white
      padding-top 15px
      padding-left 15px
      padding-right 15px
      padding-bottom 10px
      box-shadow: 0px 0px 15px #C5C5C5
      .textWrapper {
          margin-top 5px
          font-weight bold
      }
      .imgWrapper {
        width 100%
        height 200px
        background-size: cover
        background-repeat: no-repeat
        background-position 50% 50%
      }
      .positionWrapper {
          p {
            font-size: $font-size-small
          }
      }
      .bottomStrategy {
          margin-top 5px
          display flex
          justify-content: space-between
          .countWrapper {
              p {
                font-size: $font-size-small
              }
          }
          .timeWrapper {
              p {
                font-size: $font-size-small
              }
          }
      }
  }

  .dynamicPublish {
    z-index: 999;
    width: 50px;
    height: 50px;
    bottom: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 50px
      height 51px
      background-size: cover
      background-repeat: no-repeat
    }
  }
</style>
